<template>
  <div style="width: 100%">
    <div
      v-for="item in itemData"
      :key="item.name"
      class="grid-content title-gap"
      :class="item.class"
    >
      <component
        v-if="item.name"
        :is="item.name"
        :itemData="item"
        :itemIndex="itemIndex"
        :tableData="tableData"
        :ref="item.name"
      ></component>
    </div>
  </div>
</template>
</template>

<script>
import dataSet from "./components/dataset.vue";
import type from "./components/type.vue";
import tables from "./components/tables.vue";
import field from "./components/field.vue";
import handle from "./components/delete.vue";
export default {
  components: { dataSet, type, tables, field, handle },
  props: {
    tableData: Array,
    itemData: Object,
    itemIndex: Number,
  },
  data() {
    return {
      name: "data-set",
    };
  },
};
</script>

<style scoped>
.grid-content {
  display: inline-block;
  height: auto;
}
.title-gap {
  margin-right: 30px;
}
.grid-content.dataSet {
  width: 23%;
  text-align: center;
}
.grid-content.mode {
  width: 10%;
  height: calc(100% - 20px);
  text-align: center;
}
.grid-content.mode .mode-content {
  position: absolute;
  margin: auto;
  top: 0px;
  bottom: 0;
  height: 30px;
  width: 9.5%;
  border: 1px solid #ccc;
}
.grid-content.tables {
  width: 24%;
  height: calc(100% - 20px);
  text-align: center;
}
.grid-content.fields {
  width: 16%;
  text-align: center;
}
.grid-content.delete {
  width: 6%;
  /* width: 10%; */
  text-align: center;
}
</style>